<template>
	<view class="container">
		<!-- 标题 -->
		<view class="title">
			<h3>智引未来-大学生就业成长平台</h3>
		</view>

		<!-- 平台图标容器 -->
		<view class="logo-container">
			<image :src="imgsrc" class="platform-logo" mode="aspectFit" />
		</view>

		<!-- 表单区域 -->
		<u--form class="form-container" :model="model1" :rules="rules" ref="uForm" errorType="toast">
			<!-- 学号输入 -->
			<u-form-item class="input-wrapper" prop="user.studentId">
				<u-input v-model="model1.user.studentId" placeholder="请输入学号" class="rounded-input"
					shape="circle">
					<template #prefix>
						<u-icon name="account" size="30" color="#7f8388" margin-right="10"></u-icon>
					</template>
				</u-input>
			</u-form-item>

			<!-- 手机号输入 -->
			<u-form-item class="input-wrapper" prop="user.phone">
				<u-input v-model="model1.user.phone" placeholder="请输入手机号" class="rounded-input"
					shape="circle">
					<template #prefix>
						<u-icon name="phone" size="30" color="#7f8388" margin-right="10"></u-icon>
					</template>
				</u-input>
			</u-form-item>

			<!-- 验证码输入 -->
			<u-form-item class="input-wrapper code-input" prop="user.verificationCode">
				<u-input v-model="model1.user.verificationCode" placeholder="请输入验证码" class="rounded-input"
					shape="circle">
					<template #prefix>
						<u-icon name="email" size="30" color="#7f8388" margin-right="10"></u-icon>
					</template>
				</u-input>
				<u-button @click="getVerificationCode" type="primary" size="mini" plain :disabled="codeDisabled"
					class="code-btn" shape="circle">
					{{ model1.user.codeButtonText }}
				</u-button>
			</u-form-item>

			<!-- 确认绑定按钮 -->
			<u-button @click="handleBind" type="primary" shape="circle" class="bind-btn">
				确认绑定
			</u-button>
		</u--form>
	</view>
</template>

<script>
	import {
		bindStudentIDApi
	} from '../../../api/loginModel/loginModel';

	export default {
		data() {
			return {
				imgsrc:this.$baseURL+"/profile/upload/2025/05/10/logo_20250507082032A011_20250510150253A033.jpg",
				model1: {
					user: {
						studentId: '',
						phone: '',
						verificationCode: '',
						codeDisabled: false,
						codeButtonText: '获取验证码',
						countdown: 60
					}
				},
				bindStudentIDData: {
					studentID: "",
					telephone: ""
				},
				rules: {
					'user.studentId': {
						type: 'string',
						required: true,
						message: '请填写学号',
						//change：字段值发生变化时校验   blur：输入框失去焦点时触发
						trigger: ['blur', 'change']
					},
					'user.phone': {
						type: 'string',
						required: true,
						message: '请填写手机号',
						//change：字段值发生变化时校验   blur：输入框失去焦点时触发
						trigger: ['blur', 'change']
					},

					'user.verificationCode': {
						type: 'string',
						required: true,
						len: 4,
						message: '请填写4位验证码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {
			getVerificationCode() {
				if (!this.model1.user.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}

				if (!/^1[3-9]\d{9}$/.test(this.model1.user.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return;
				}

				// 这里调用获取验证码的API
				// 示例：this.$api.sendSmsCode({ phone: this.phone })

				// 模拟发送成功
				uni.showToast({
					title: '验证码已发送'
				});
				this.startCountdown();
			},

			// 开始倒计时
			startCountdown() {
				this.codeDisabled = true;
				let timer = setInterval(() => {
					this.model1.user.countdown--;
					this.model1.user.codeButtonText = `${this.model1.user.countdown}s`;

					if (this.model1.user.countdown <= 0) {
						clearInterval(timer);
						this.model1.user.codeDisabled = false;
						this.model1.user.codeButtonText = '获取验证码';
						this.model1.user.countdown = 60;
					}
				}, 1000);
			},
			beforeDestroy() {
				// 组件销毁时清除定时器
				clearInterval(this.timer);
			},
			// 发送绑定手机号的请求
			handleBind() {
				// 进行表单验证
				this.$refs.uForm.validate().then(res => {

					this.bindStudentIDData.studentID = this.model1.user.studentId
					this.bindStudentIDData.telephone = this.model1.user.phone
					bindStudentIDApi(this.bindStudentIDData).then((res) => {
						if (res.code == 200) {
							// 手机号绑定成功
							console.log(res.msg)
							uni.reLaunch({
								url: '/pages/index/index'
							});
						} else {
							// 手机号绑定失败
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}).catch(errors => {
					uni.$u.toast(errors[0].message);
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-button--plain.data-v-3bf2dba7 {
		position: absolute;
		width: 70px;
		left: 225px;
		bottom: 355px;
		z-index: 9;
	}

	.container {
		padding: 40rpx;
		min-height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 标题 */
	.title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin: 40rpx 0;
		color: #333;
	}

	/* 平台图标 */
	.logo-container {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0 60rpx;

		.platform-logo {
			width: 200rpx;
			height: 200rpx;
			border-radius: 24rpx;
		}
	}

	/* 表单区域 */
	.form-container {
		width: 100%;
		padding: 0 50rpx;
	}

	/* 输入框样式 */
	.input-wrapper {
		position: relative;

		/* 输入框 */
		.rounded-input {
			background-color: #fff;
			padding: 0 20rpx;
			height: 90rpx;
			border: 1px solid #e6e6e6;


		}
	}

	/* 验证码 */
	.code-input {
		display: flex;
		align-items: center;

		.rounded-input {
			flex: 1;
			margin-right: 15rpx;
		}

		.code-btn {
			width: 200rpx;
			height: 90rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			white-space: nowrap;
			background-color: #fff;
			color: #2979ff;

			&[disabled] {
				opacity: 0.6;
			}
		}
	}

	.bind-btn {
		margin-top: 50rpx;
		height: 100rpx;
		font-size: 32rpx;
		border-radius: 50rpx;
		background-color: #2979ff;
		width: 100%;
		color: #fff;
		border: none;
	}
</style>